import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import style from '@/styles/components/door.module.less';

@Component({})
export default class EapDoor extends Vue {
  @Prop({ default: false }) private value!: boolean;
  @Prop({ default: '#cdcdcd' }) private color!: '';

  @Watch('color')
  public watchColor() {
    (this.$refs['door'] as  HTMLDivElement).style.setProperty('--doorColor', this.color);
  }

  public render() {
    return (
      <div class={[style['door-box']]} ref='door' on-click={() => this.$emit('click')}>
        <div class={[style['door'], this.value && style['door-open']]}>
          <div class={style['door-handle']}></div>
        </div>
      </div>
    );
  }
}
